<template>
  <div class="productRulesDialog">
    <div class="dialogBody">
      <el-form label-width="110px" :model="dialogForm" size="mini">
        <el-row class="title_name">
          <el-col :span="24" class="title_name"><span class="title_name_l"></span> 规则名称</el-col>
          <el-col :span="12"><el-input v-model="dialogForm.ruleName" placeholder="请输入"></el-input></el-col>
        </el-row>
        <el-row class="title_name">
          <el-col :span="24" class="title_name"><span class="title_name_l"></span> 选择产品</el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="dialogForm.productIds">
              <el-row>
                <el-col v-for="(item,index) in allProduct" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.id">{{ item.productName }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row class="title_name">
          <el-col :span="24" class="title_name"><span class="title_name_l"></span> 套餐规则</el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="dialogForm.packageIds">
              <el-row>
                <el-col v-for="(item,index) in allOperPackage" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.id">{{ item.packageName }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row class="title_name">
          <el-col :span="24" class="title_name"><span class="title_name_l"></span> 诊疗阶段</el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="dialogForm.phase">
              <el-row>
                <el-col v-for="(item,index) in dict.order_treat_stage" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row class="title_name">
          <el-col :span="24" class="title_name"><span class="title_name_l"></span> 治疗建议</el-col>
          <el-col :span="24">
            <el-checkbox-group v-model="dialogForm.rules">
              <el-row>
                <el-col v-for="(item,index) in dict.package_rule" :key="index" :span="6" class="checkbox_col">
                  <el-checkbox :label="item.label">{{ item.value }}</el-checkbox>
                </el-col>
              </el-row>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="dialogSave">保 存</el-button>
    </span>
  </div>
</template>

<script>
import { addProductRules, editProductRules, queryAll, productRuleDetail } from '@/api/product';
import { operPackage } from '@/api/order';
import { mapGetters } from 'vuex';

function InitParam() {
  return {
    'createBy': '',
    'ruleName': '', // 规则名称
    'productIds': [], // 选择产品
    'packageIds': [], // 套餐规则
    'phase': [], // 诊疗阶段
    'rules': [] // 治疗建议
  };
}

export default {
  components: {},
  props: {
    callback: {
      type: Function,
      default: new Function()
    },
    rowId: {
      type: String,
      default: ''
    }
  },
  dicts: ['package_rule', 'package_rule_type', 'order_treat_stage'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogForm: {
        'createBy': '',
        'ruleName': '', // 规则名称
        'productIds': [], // 选择产品
        'packageIds': [], // 套餐规则
        'phase': [], // 诊疗阶段
        'rules': [] // 诊疗建议
      },
      allProduct: [],
      allOperPackage: []
    };
  },
  computed: {
    ...mapGetters(['searchInfo', 'user'])
  },
  watch: {},
  mounted() {
    this.getAllProduct();
    this.getOperPackage();
    console.log('rowidaaa------', this.rowId);
    if (this.rowId !== '') {
      this.getProductRuleDetail(this.rowId);
    }
    console.log('dict.package_rule_type----', this.dict.order_treat_stage);
  },
  methods: {
    // 获取全部产品
    getAllProduct() {
      queryAll({}).then(res => {
        this.allProduct = res;
      });
    },
    // 获取全部套餐
    getOperPackage() {
      operPackage().then(res => {
        this.allOperPackage = res;
      });
    },
    // 新增&编辑&&停用
    dialogSave() {
      let fun = null;
      let text = '';
      const param = JSON.parse(JSON.stringify(this.dialogForm));
      param.createBy = this.user.id;
      if (this.rowId === '') {
        fun = addProductRules;
        text = '新增成功';
      } else {
        fun = editProductRules;
        text = '编辑成功';
        delete param.createDate;
        delete param.productIdList;
        delete param.phaseList;
        delete param.ruleList;
        delete param.packageIdList;
      }
      fun(param).then(res => {
        this.$notify({
          title: '提示',
          message: text,
          type: 'success',
          duration: 5000
        });
        this.dialogForm = new InitParam();
        this.callback('1');
      });
    },
    // 取消弹框
    dialogClose() {
      this.dialogForm = new InitParam();
      this.callback('0');
    },
    // 获取详情
    getProductRuleDetail(ruleId) {
      productRuleDetail({ id: ruleId }).then(res => {
        this.dialogForm = res;
        this.dialogForm.productIds = res.productIdList;
        this.dialogForm.phase = res.phaseList;
        this.dialogForm.rules = res.ruleList;
        this.dialogForm.packageIds = res.packageIdList;
        console.log(this.dialogForm, '-----------编辑参数');
      });
    }
  }
};
</script>

<style scoped lang='scss'>
    .title_name{
    padding-bottom: 15px;
    }
    .title_name_l{
    display: inline-block;
    width: 3px;
    height: 12px;
    background-color: #508FCC;
    }
    .checkbox_col{
        padding: 5px;
    }
</style>

